<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>筑森经营看板</title>
    <!-- 引入Vue3 -->
    <script src="./src/assets/js/vue.global.js"></script>
    <!-- 引入axios -->
    <script src="./src/assets/js/axios.min.js"></script>
    <script src="/src/assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="./src/assets/less/index.css">
</head>

<body>
    <div id="app">
        <!-- 顶部看板名及其日期筛选 -->
        <header class="dashboard-header">
            <div class="header-content">
                <h1 class="title">筑森经营看板</h1>
                <div class="date-container">
                    <span class="date-label">数据截止时间：</span>
                    <input type="date" v-model="selectedDate" ref="dateInput" class="date-picker boxShadow">
                    <span class="custom-icon" @click.stop="handleIconClick"></span>
                </div>
            </div>
        </header>
        <!-- 大屏内容 -->
        <main>
            <!-- 分类标题 -->
            <!-- 年度总指标 -->
            <h1 class="common-style">
                <div class="common-text">
                    <img class="common-img" src="/src/assets/images/年度指标总览.png" alt="">
                    年度指标总览
                </div>
            </h1>
            <div class="there-box">
                <div class="left-there-box">
                    <div class="there-box-item">
                        <div class="year-left-item">
                            <h1>同比 <span class="red">12%</span></h1>
                            <div class="year-left-item-number bold"> {{monthData.yhhje||'00'}}
                                <img class="backImage" src="/src/assets/images/底座.png" alt="">
                            </div>
                            <div class="year-left-item-label">全口径签约<span>(万元)</span> </div>
                        </div>
                    </div>
                    <div class="there-box-item">
                        <div class="year-left-item">
                            <h1>同比 <span class="red">12%</span></h1>
                            <div class="year-left-item-number bold"> 4860
                                <img class="backImage" src="/src/assets/images/底座.png" alt="">
                            </div>
                            <div class="year-left-item-label">净签约统计<span>(万元)</span> </div>
                        </div>
                    </div>
                    <div class="there-box-item">
                        <div class="year-left-item">
                            <h1>同比 <span class="red">12%</span></h1>
                            <div class="year-left-item-number bold"> 11005
                                <img class="backImage" src="/src/assets/images/底座.png" alt="">
                            </div>
                            <div class="year-left-item-label">公司回款<span>(万元)</span> </div>
                        </div>
                    </div>
                    <div class="there-box-item">
                        <div class="year-left-item">
                            <h1>同比 <span class="red">12%</span></h1>
                            <div class="year-left-item-number bold"> {{monthData.avg_per_capita||'00'}}
                                <img class="backImage" src="/src/assets/images/底座.png" alt="">

                            </div>
                            <div class="year-left-item-label">年度人均效能<span>(万元)</span> </div>
                        </div>
                    </div>
                </div>
                <div class="center-there-box">
                    <div class="row-title">
                        <img src="/src/assets/images/标.png" alt="">
                        <span>年度营业收入(不含税)</span>
                    </div>
                    <div class="up-down-text">同比<span>12%</span></div>
                    <div class="icon-box">
                        <div class="icon-item">
                            <img src="/src/assets/images/目标.png" alt="">
                            <div class="icon-number bold">5561.1</div>
                            <div class="icon-label">目标(万元)</div>
                        </div>
                        <div class="icon-item">
                            <img src="/src/assets/images/已完成.png" alt="">
                            <div class="icon-number bold">5561.1</div>
                            <div class="icon-label">已完成(万元)</div>
                        </div>
                        <div class="icon-item">
                            <img src="/src/assets/images/完成进度.png" alt="">
                            <div class="icon-number bold">22.16%</div>
                            <div class="icon-label">完成进度</div>
                        </div>
                    </div>
                </div>
                <div class="right-there-box">
                    <div class="row-title">
                        <img src="/src/assets/images/标.png" alt="">
                        <span>节点收入</span>
                    </div>
                    <div class="up-down-text">同比<span>12%</span></div>
                    <div class="icon-box">
                        <div class="icon-item">
                            <img src="/src/assets/images/目标.png" alt="">
                            <div class="icon-number bold">5561.1</div>
                            <div class="icon-label">目标(万元)</div>
                        </div>
                        <div class="icon-item">
                            <img src="/src/assets/images/已完成.png" alt="">
                            <div class="icon-number bold">5561.1</div>
                            <div class="icon-label">已完成(万元)</div>
                        </div>
                        <div class="icon-item">
                            <img src="/src/assets/images/完成进度.png" alt="">
                            <div class="icon-number bold">22.16%</div>
                            <div class="icon-label">完成进度</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 市场类-签约 -->
            <h1 class="common-style">
                <div class="common-text">
                    <img class="common-img" src="/src/assets/images/市场类-签约.png" alt="">
                    市场类-签约
                </div>
                <div class="year-month">
                    <div @click="marketEditBtnType='month'" class="year-month-btn"
                        :class="{'active':marketEditBtnType=='month'}">月度</div>
                    <div @click="marketEditBtnType='year'" class="year-month-btn"
                        :class="{'active':marketEditBtnType=='year'}">年度</div>

                </div>
            </h1>
            <div class="there-box">
                <div class="center-there-box up-down-layout-box">
                    <div class="top">
                        <div class="row-title">
                            <img src="/src/assets/images/标.png" alt="">
                            <span>统计</span>
                        </div>
                        <div class="up-down-text" style="margin-top: 10%;margin-bottom: 1%;">同比<span>12%</span></div>
                        <div class="icon-box">
                            <div class="icon-item">
                                <img src="/src/assets/images/目标.png" alt="">
                                <div class="icon-number bold">102</div>
                                <div class="icon-label">全年目标(亿)</div>
                            </div>
                            <div class="icon-item">
                                <img src="/src/assets/images/已完成.png" alt="">
                                <div class="icon-number bold">5561.1</div>
                                <div class="icon-label">全口径签约(万元)</div>
                            </div>
                            <div class="icon-item">
                                <img src="/src/assets/images/完成进度.png" alt="">
                                <div class="icon-number bold">22.16%</div>
                                <div class="icon-label">完成进度</div>
                            </div>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="row-title mb0">
                            <img src="/src/assets/images/标.png" alt="">
                            <span>合同一级分类统计</span>
                        </div>
                        <div id="oneChart" style="width: 100%; height: 234px;margin-top: 3%;"></div>
                    </div>
                    <div>
                    </div>
                </div>
                <div class="center-there-box up-down-layout-box">
                    <div class="top">
                        <div class="row-title mb0">
                            <img src="/src/assets/images/标.png" alt="">
                            <span>按常州市区域统计</span>
                        </div>
                        <div id="main" style="width: 100%; height: 234px;margin-top: 3%;"></div>
                    </div>
                    <div class="bottom">
                        <div class="row-title mb0">
                            <img src="/src/assets/images/标.png" alt="">
                            <span>合同二级分类统计</span>
                        </div>
                        <div style="height: 270px;">这里是圆饼图</div>
                    </div>
                </div>
                <div class="right-there-box">
                    <div class="row-title">
                        <img src="/src/assets/images/标.png" alt="">
                        <span>按区域统计前十省份</span>
                    </div>
                    <div id="mainTen" style="width: 100%; height: 588px;"></div>
                </div>
            </div>
            <!-- 市场类-回款 -->
            <h1 class="common-style">
                <div class="common-text">
                    <img class="common-img" src="/src/assets/images/市场类-签约.png" alt="">
                    市场类-回款
                </div>
                <div class="year-month">
                    <div @click="marketEditBtnType='month'" class="year-month-btn"
                        :class="{'active':marketEditBtnType=='month'}">月度</div>
                    <div @click="marketEditBtnType='year'" class="year-month-btn"
                        :class="{'active':marketEditBtnType=='year'}">年度</div>

                </div>
            </h1>
            <div class="there-box">
                <div class="center-there-box up-down-layout-box" style="height: 338px;">
                    <div class="top_small" style="height: 90px;">
                        <div class="row-title" style="margin-bottom: 12px;">
                            <img src="/src/assets/images/标.png" alt="">
                            <span>回款统计</span>
                        </div>
                        <div class="huikuanNumber">
                            <div class="left_number">
                                <span>0</span>
                                <span>5</span>
                                <span>5</span>
                                <span>6</span>
                                <span>0</span>
                                <span>.</span>
                                <span>1</span>
                                <b>(万元)</b>
                            </div>
                            <div class="right_number">同比<span>12%</span></div>
                        </div>
                    </div>
                    <div class="bottom" style="height: 236px;margin-top: 12px;">
                        <div class="row-title mb0">
                            <img src="/src/assets/images/标.png" alt="">
                            <span>回款率统计</span>
                        </div>
                        <div class="icon-box" style="margin-top: 11%;">
                            <div class="icon-item icon-item-two">
                                <img src="/src/assets/images/huikuanlv.png" alt="">
                                <div class="text_right">
                                    <div class="icon-number bold" style="margin-bottom: 0;text-align: left;">66.89%
                                    </div>
                                    <div class="icon-label" style="margin-bottom: 0;">新城全资回款率 <span>(目标 30%)</span>
                                    </div>
                                </div>
                            </div>
                            <div class="icon-item icon-item-two">
                                <img src="/src/assets/images/huikuanlv2.png" alt="">
                                <div class="text_right">
                                    <div class="icon-number bold" style="margin-bottom: 0;text-align: left;">42.10%
                                    </div>
                                    <div class="icon-label" style="margin-bottom: 0;text-align: left;">非新城全资回款率
                                        <span>(目标 60%)</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                    </div>
                </div>
                <div class="center-there-box up-down-layout-box cell-backColor" style="height: 338px;">
                    <div class="row-title mb0">
                        <img src="/src/assets/images/标.png" alt="">
                        <span>回款分类统计</span>
                    </div>
                    <div style="height: 270px;">这里是圆饼图</div>

                </div>
                <div class="right-there-box cell-backColor" style="height: 338px;">
                    <div class="row-title">
                        <img src="/src/assets/images/标.png" alt="">
                        <span>回款部门统计</span>
                    </div>
                    <div id="huikuanbumen" style="width: 100%; height: 288px;"></div>
                </div>
            </div>
            <!-- 应收款 -->
            <div class="there-box" style="margin-top: 12px;">
                <div class="center-there-box up-down-layout-box" style="height: 338px;flex: 1;">
                    <div class="top_small" style="height: 90px;">
                        <div class="row-title" style="margin-bottom: 12px;">
                            <img src="/src/assets/images/标.png" alt="">
                            <span>公司总应收款</span>
                        </div>
                        <div class="huikuanNumber">
                            <div class="left_number">
                                <span>0</span>
                                <span>5</span>
                                <span>5</span>
                                <span>6</span>
                                <span>0</span>
                                <span>.</span>
                                <span>1</span>
                                <b>(万元)</b>
                            </div>
                            <div class="right_number">同比<span>12%</span></div>
                        </div>
                    </div>
                    <div class="bottom" style="height: 236px;margin-top: 12px;">
                        <div class="row-title mb0">
                            <img src="/src/assets/images/标.png" alt="">
                            <span>应收款分类统计</span>
                        </div>
                        <div style="height: 270px;">这里是圆饼图</div>
                    </div>
                    <div>
                    </div>
                </div>
                <div class="right-there-box cell-backColor" style="height: 338px;flex: 2.02;">
                    <div class="row-title">
                        <img src="/src/assets/images/标.png" alt="">
                        <span>应收款部门统计</span>
                    </div>
                    <div id="shouldkuanbumen" style="width: 100%; height: 288px;"></div>
                </div>
            </div>
            <!-- 运营类-营收 -->
            <h1 class="common-style">
                <div class="common-text">
                    <img class="common-img" src="/src/assets/images/市场类-签约.png" alt="">
                    运营类-营收
                </div>
                <div class="year-month">
                    <div @click="marketEditBtnType='month'" class="year-month-btn"
                        :class="{'active':marketEditBtnType=='month'}">月度</div>
                    <div @click="marketEditBtnType='year'" class="year-month-btn"
                        :class="{'active':marketEditBtnType=='year'}">年度</div>

                </div>
            </h1>
            <div class="there-box">
                <div class="center-there-box up-down-layout-box cell-backColor" style="height: 338px;">
                    <div class="row-title mb0">
                        <img src="/src/assets/images/标.png" alt="">
                        <span>营业收入</span>
                    </div>
                    <div style="height: 270px;width: 100%;" id="runningMoney"></div>

                </div>
                <div class="center-there-box up-down-layout-box cell-backColor" style="height: 338px;">
                    <div class="row-title mb0">
                        <img src="/src/assets/images/标.png" alt="">
                        <span>节点收入(含税)</span>
                    </div>
                    <div style="height: 270px;width: 100%;" id="pointNumbber"></div>

                </div>
                <div class="center-there-box up-down-layout-box cell-backColor" style="height: 338px;">
                    <div class="row-title mb0">
                        <img src="/src/assets/images/标.png" alt="">
                        <span>人均产值</span>
                    </div>
                    <div style="height: 270px;margin-top: 4%;" id="renjunchanzhi"></div>

                </div>
            </div>
            <!-- 运营类-外发 -->
            <h1 class="common-style">
                <div class="common-text">
                    <img class="common-img" src="/src/assets/images/市场类-签约.png" alt="">
                    运营类-外发
                </div>
                <div class="year-month">
                    <div @click="marketEditBtnType='month'" class="year-month-btn"
                        :class="{'active':marketEditBtnType=='month'}">月度</div>
                    <div @click="marketEditBtnType='year'" class="year-month-btn"
                        :class="{'active':marketEditBtnType=='year'}">年度</div>

                </div>
            </h1>
            <div class="there-box" style="margin-top: 12px;justify-content: flex-start;">
                <div class="center-there-box up-down-layout-box" style="height: 448px;flex: unset;width: 32.8%;">
                    <div class="top_small" style="height: 90px;">
                        <div class="row-title" style="margin-bottom: 12px;">
                            <img src="/src/assets/images/标.png" alt="">
                            <span>外发签约</span>
                        </div>
                        <div class="huikuanNumber">
                            <div class="left_number">
                                <span>0</span>
                                <span>5</span>
                                <span>5</span>
                                <span>6</span>
                                <span>0</span>
                                <span>.</span>
                                <span>1</span>
                                <b>(万元)</b>
                            </div>
                            <div class="right_number">同比<span>12%</span></div>
                        </div>
                    </div>
                    <div class="bottom" style="height: 340px;margin-top: 18px;">
                        <div class="row-title mb0">
                            <img src="/src/assets/images/标.png" alt="">
                            <span>外发确认</span>
                        </div>
                        <div style="width: 100%;height: 340px;" id="outSure">
                        </div>
                    </div>
                    <div>
                    </div>
                </div>
                <div class="right-there-box cell-backColor" style="height: 448px;flex:unset;width: 32.8%;">
                    <div class="row-title">
                        <img src="/src/assets/images/标.png" alt="">
                        <span>外发支付</span>
                    </div>
                    <div style="width: 100%;height: 340px;" id="outPay">
                    </div>
                </div>
            </div>
        </main>
    </div>

    </div>

    <script>
        // Vue应用初始化
        const { createApp, ref, onMounted, watch } = Vue;
        createApp({
            setup() {
                // 公共baseURL
                // const baseUrl = 'http://localhost:3000';
                const baseUrl = 'http://zsyyxt.gfdesign.com.cn:88';
                const selectedDate = ref(new Date().toISOString().slice(0, 10));
                const dateInput = ref(null);

                const handleIconClick = () => {
                    if (dateInput.value) {
                        // 现代浏览器支持的方法
                        if (typeof dateInput.value.showPicker === 'function') {
                            dateInput.value.showPicker();
                        } else {
                            // 传统方法
                            dateInput.value.focus();
                        }
                    }
                }
                // JSONP 请求函数
                const jsonpRequest = (url) => {
                    return new Promise((resolve, reject) => {
                        // 创建唯一的回调函数名
                        const callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());

                        // 创建 script 标签
                        const script = document.createElement('script');

                        // 设置超时处理
                        const timeoutId = setTimeout(() => {
                            cleanup();
                            reject(new Error('Request timeout'));
                        }, 10000); // 10秒超时

                        // 清理函数
                        const cleanup = () => {
                            clearTimeout(timeoutId);
                            delete window[callbackName];
                            if (script.parentNode) {
                                document.body.removeChild(script);
                            }
                        };

                        // 定义回调函数
                        window[callbackName] = (data) => {
                            cleanup();
                            resolve(data);
                        };

                        // 设置 script 的 src 属性
                        script.src = `${url}${url.includes('?') ? '&' : '?'}callback=${callbackName}`;

                        // 错误处理
                        script.onerror = () => {
                            cleanup();
                            reject(new Error('JSONP request failed'));
                        };

                        // 添加到文档中
                        document.body.appendChild(script);
                    });
                };

                const marketEditBtnType = ref('month');
                const loading = ref(false);
                const error = ref(null);
                let monthData = ref({});
                const fetchMarketData = async (type) => {
                    try {
                        loading.value = true;
                        // const url = `${baseUrl}/interface/data/yykb/GetReportkbtj.jsp?month=${selectedDate.value}&tag=wfje,yhhje,jhy,avg_per_capita`;

                        // const response = await jsonpRequest(url);
                        const response = await axios.get(`${baseUrl}/interface/data/yykb/GetReportkbtj.jsp?month=${selectedDate.value}&tag=wfje,yhhje,jhy,avg_per_capita`);
                        console.log(response);
                        monthData.value = response.data.tags.reduce((acc, tag, index) => {
                            acc[tag] = response.data.data[index];
                            return acc;
                        }, {});
                        console.log(monthData.value);
                        // 数据更新逻辑...
                    } catch (err) {
                        error.value = err.message;
                    } finally {
                        loading.value = false;
                    }
                };
                // 在setup函数中添加
                // 常州市区域统计
                const initEcharts = () => {
                    const chart = echarts.init(document.getElementById('main'));
                    // 保留原有图表配置逻辑
                    // 初始化图表结构
                    const initChart = (names, values) => {
                        const data = names.map((name, i) => ({
                            name,
                            value: values[i]
                        }));

                        const barColors = data.map((_, i) => i < 3 ? '#3fa7ff' : '#2b6d9f');

                        chart.setOption({
                            backgroundColor: '#0b1e3d',
                            grid: {
                                top: '5%',
                                bottom: '5%',
                                left: 124,
                                right: 83
                            },
                            xAxis: {
                                type: 'value',
                                splitLine: { show: false },
                                axisLine: { show: false },
                                axisTick: { show: false },
                                axisLabel: { show: false }
                            },
                            yAxis: [
                                {
                                    type: 'category',
                                    inverse: true,
                                    data: data.map((item, i) => {
                                        const rank = i + 1;
                                        const label = `{rank${rank <= 3 ? 'Top' : 'Other'}|NO.${rank}}  {name|${item.name}}`;
                                        return label;
                                    }),
                                    axisLabel: {
                                        formatter: value => value,
                                        margin: 4,
                                        rich: {
                                            rankTop: {
                                                color: '#fff',
                                                backgroundColor: '#188df0',
                                                padding: [5, 6, 3],
                                                borderRadius: 2,
                                                fontSize: 12
                                            },
                                            rankOther: {
                                                color: '#7a8da8',
                                                backgroundColor: 'transparent',
                                                padding: [5, 6],
                                                fontSize: 12
                                            },
                                            name: {
                                                color: '#fff',
                                                fontSize: 14
                                            }
                                        }
                                    },
                                    axisLine: { show: false },
                                    axisTick: { show: false }
                                },
                                {
                                    type: 'category',
                                    inverse: true,
                                    data: data.map(item => item.value.toFixed(2)),
                                    axisLabel: {
                                        color: '#fff',
                                        fontSize: 14
                                    },
                                    axisLine: { show: false },
                                    axisTick: { show: false }
                                }
                            ],
                            series: [
                                {
                                    type: 'bar',
                                    data: data.map((item, i) => ({
                                        value: item.value,
                                        itemStyle: {
                                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
                                                i < 3
                                                    ? [
                                                        { offset: 0, color: '#1B3254' },
                                                        { offset: 1, color: '#1F98FF' }
                                                    ]
                                                    : [
                                                        { offset: 0, color: '#1B3254' },
                                                        { offset: 1, color: '#1F98FF' }
                                                    ]
                                            ),
                                            borderRadius: [5, 5, 5, 5]
                                        }
                                    })),
                                    barCategoryGap: '30%',
                                    barWidth: 10,
                                    showBackground: true,
                                    backgroundStyle: {
                                        color: '#1f3d68',
                                        borderRadius: [5, 5, 5, 5]
                                    },
                                    yAxisIndex: 0,
                                    label: { show: false }
                                }
                            ]

                        });
                    };

                    // ✅ 模拟数据
                    const mockResponse = {
                        tags: ["xinbeiqu", "zhonglouqu", "wujinqu", "tianningqu", "jingkaiqu", "jintanqu"],
                        data: [15.28, 10.28, 9.47, 8.47, 8.47, 8.47]
                    };

                    // 映射英文 tag 为中文名
                    const nameMap = {
                        xinbeiqu: '新北区',
                        zhonglouqu: '钟楼区',
                        wujinqu: '武进区',
                        tianningqu: '天宁区',
                        jingkaiqu: '经开区',
                        jintanqu: '金坛区'
                    };

                    const names = mockResponse.tags.map(tag => nameMap[tag] || tag);
                    const values = mockResponse.data;

                    // 渲染图表
                    initChart(names, values);
                    // 保持数据模拟和渲染逻辑
                };

                // 前十省份统计
                const initTenEcharts = () => {
                    const chart = echarts.init(document.getElementById('mainTen'));
                    // 保留原有图表配置逻辑
                    // 初始化图表结构
                    const initChart = (names, values) => {
                        const data = names.map((name, i) => ({
                            name,
                            value: values[i]
                        }));

                        const barColors = data.map((_, i) => i < 3 ? '#3fa7ff' : '#2b6d9f');

                        chart.setOption({
                            backgroundColor: '#0b1e3d',
                            grid: {
                                top: '3%',
                                bottom: '5%',
                                left: 34,
                                right: 78
                            },
                            xAxis: {
                                type: 'value',
                                splitLine: { show: false },
                                axisLine: { show: false },
                                axisTick: { show: false },
                                axisLabel: { show: false }
                            },
                            yAxis: [
                                {
                                    type: 'category',
                                    inverse: true,
                                    data: data.map((item, i) => {
                                        const rank = i + 1;
                                        const label = `{rank${rank <= 3 ? 'Top' : 'Other'}|NO.${rank}}   {name|${item.name}}`;
                                        return label;
                                    }),
                                    axisLabel: {
                                        formatter: value => value,
                                        margin: 18,
                                        rich: {
                                            rankTop: {
                                                color: '#fff',
                                                backgroundColor: '#1F98FF', // 渐变图不建议在 label 中用，直接用纯色
                                                padding: [5, 6, 3],
                                                borderRadius: 4,
                                                fontSize: 12,
                                                align: 'left'
                                                // verticalAlign: 'middle' // ✅ 垂直居中
                                            },
                                            rankOther: {
                                                color: '#7a8da8',
                                                backgroundColor: 'transparent',
                                                padding: [5, 6],
                                                fontSize: 12,
                                                align: 'left'
                                            },
                                            name: {
                                                color: '#fff',
                                                fontSize: 14
                                            }
                                        },
                                        align: 'left', // ✅ 将文字左对齐
                                        verticalAlign: 'top', // ✅ 垂直顶端对齐
                                        padding: [-35, 0, 5, 18]  // ✅ 调整顶部与柱子之间的间距
                                    },
                                    axisLine: { show: false },
                                    axisTick: { show: false }
                                },
                                {
                                    type: 'category',
                                    inverse: true,
                                    data: data.map(item => item.value.toFixed(2)),
                                    axisLabel: {
                                        color: '#fff',
                                        fontSize: 14
                                    },
                                    axisLine: { show: false },
                                    axisTick: { show: false }
                                }
                            ],
                            series: [
                                {
                                    type: 'bar',
                                    data: data.map((item, i) => ({
                                        value: item.value,
                                        itemStyle: {
                                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
                                                i < 3
                                                    ? [
                                                        { offset: 0, color: '#1B3254' },
                                                        { offset: 1, color: '#1F98FF' }
                                                    ]
                                                    : [
                                                        { offset: 0, color: '#1B3254' },
                                                        { offset: 1, color: '#1F98FF' }
                                                    ]
                                            ),
                                            borderRadius: [5, 5, 5, 5]
                                        }
                                    })),
                                    barCategoryGap: '30%',
                                    barWidth: 10,
                                    showBackground: true,
                                    backgroundStyle: {
                                        color: '#1f3d68',
                                        borderRadius: [5, 5, 5, 5]
                                    },
                                    yAxisIndex: 0,
                                    label: { show: false }
                                }
                            ]

                        });
                    };

                    // ✅ 模拟数据
                    const mockResponse = {
                        tags: ["jiangsu", "anhui", "shanxi", "jiangxi", "hainan", "jiangxi", "hainan", "jiangxi", "hainan", "jiangxi"],
                        data: [15.28, 10.28, 9.47, 8.47, 8.47, 8.47, 8.47, 8.27, 8.17, 8.07]
                    };

                    // 映射英文 tag 为中文名
                    const nameMap = {
                        jiangsu: '江苏省',
                        anhui: '安徽省',
                        shanxi: '山西省',
                        jiangxi: '江西省',
                        hainan: '海南省',
                    };

                    const names = mockResponse.tags.map(tag => nameMap[tag] || tag);
                    const values = mockResponse.data;

                    // 渲染图表
                    initChart(names, values);
                    // 保持数据模拟和渲染逻辑
                };

                // 合同一级分类统计
                const initoneChartEcharts = () => {
                    const chart = echarts.init(document.getElementById('oneChart'));

                    // 初始化图表结构
                    const initChart = (xAxisData, seriesData) => {
                        chart.setOption({
                            grid: {
                                left: '89px', // 左边距
                                right: '42px', // 右边距
                                top: '40px', // 上边距
                                bottom: '37px' // 下边距
                            },
                            xAxis: {
                                type: 'category',
                                data: xAxisData, // 使用传入的 xAxis 数据
                                axisLabel: {
                                    fontSize: 14
                                },
                                axisTick: {
                                    show: false // 去掉 x 轴的刻度线
                                }
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value}'
                                },
                                axisLine: {
                                    show: false // 隐藏 y 轴线
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        type: 'dashed', // 刻度线变为虚线
                                        color: '#324460'
                                    }
                                },
                                name: '合同签约值(万元)', // y 轴顶部的文字
                                nameTextStyle: {
                                    fontSize: 12,
                                    color: '#7a8da8', // 设置y轴标题颜色
                                },
                                nameLocation: 'end', // 在 y 轴中间显示文字
                                // nameGap: -10, // 设置标题与轴的间距
                                nameRotate: 0, // 旋转角度
                            },
                            series: [{
                                data: seriesData, // 使用传入的 series 数据
                                type: 'bar',
                                barWidth: '16px', // 设置柱状图的宽度为 16px
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            // 创建从透明到渐变的颜色
                                            return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                { offset: 0, color: 'rgba(63, 167, 255, 0)' },  // 从透明开始
                                                { offset: 1, color: '#3fa7ff' }  // 渐变到设定的颜色
                                            ]);
                                        },
                                        label: {
                                            show: true, // 显示数据标签
                                            position: 'top', // 数据标签显示在柱状图上方
                                            fontSize: 14,
                                            color: '#fff' // 设置标签的颜色
                                        }
                                    }
                                }
                            }]
                        });
                    };

                    // 直接使用 xAxis 和 series 的数据
                    const xAxisData = ['新城全资', '新城合作', '非新城']; // 直接定义 xAxis 数据
                    const seriesData = [2840, 4178, 3166]; // 直接定义 series 数据

                    // 渲染图表
                    initChart(xAxisData, seriesData);
                };

                //人均产值 
                const initrenjunchanzhiEcharts = () => {
                    const chart = echarts.init(document.getElementById('renjunchanzhi'));
                    // 保留原有图表配置逻辑
                    // 初始化图表结构
                    const initChart = (names, values) => {
                        const data = names.map((name, i) => ({
                            name,
                            value: values[i]
                        }));

                        const barColors = data.map((_, i) => i < 3 ? '#3fa7ff' : '#2b6d9f');

                        chart.setOption({
                            backgroundColor: '#0b1e3d',
                            grid: {
                                top: '4%',
                                bottom: '5%',
                                left: 34,
                                right: 78
                            },
                            xAxis: {
                                type: 'value',
                                splitLine: { show: false },
                                axisLine: { show: false },
                                axisTick: { show: false },
                                axisLabel: { show: false }
                            },
                            yAxis: [
                                {
                                    type: 'category',
                                    inverse: true,
                                    data: data.map((item, i) => {
                                        const rank = i + 1;
                                        const label = `{rank${rank <= 3 ? 'Top' : 'Other'}|NO.${rank}}   {name|${item.name}}`;
                                        return label;
                                    }),
                                    axisLabel: {
                                        formatter: value => value,
                                        margin: 18,
                                        rich: {
                                            rankTop: {
                                                color: '#fff',
                                                backgroundColor: '#1F98FF', // 渐变图不建议在 label 中用，直接用纯色
                                                padding: [5, 6, 3],
                                                borderRadius: 4,
                                                fontSize: 12,
                                                align: 'left',
                                                // verticalAlign: 'middle' // ✅ 垂直居中
                                            },
                                            rankOther: {
                                                color: '#7a8da8',
                                                backgroundColor: 'transparent',
                                                padding: [5, 6],
                                                fontSize: 12,
                                                align: 'left'
                                            },
                                            name: {
                                                color: '#fff',
                                                fontSize: 14
                                            }
                                        },
                                        align: 'left', // ✅ 将文字左对齐
                                        verticalAlign: 'top', // ✅ 垂直顶端对齐
                                        padding: [-35, 0, 5, 18]  // ✅ 调整顶部与柱子之间的间距
                                    },
                                    axisLine: { show: false },
                                    axisTick: { show: false }
                                },
                                {
                                    type: 'category',
                                    inverse: true,
                                    data: data.map(item => item.value.toFixed(2)),
                                    axisLabel: {
                                        color: '#fff',
                                        fontSize: 14
                                    },
                                    axisLine: { show: false },
                                    axisTick: { show: false }
                                }
                            ],
                            series: [
                                {
                                    type: 'bar',
                                    data: data.map((item, i) => ({
                                        value: item.value,
                                        itemStyle: {
                                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
                                                i < 3
                                                    ? [
                                                        { offset: 0, color: '#1B3254' },
                                                        { offset: 1, color: '#1F98FF' }
                                                    ]
                                                    : [
                                                        { offset: 0, color: '#1B3254' },
                                                        { offset: 1, color: '#1F98FF' }
                                                    ]
                                            ),
                                            borderRadius: [5, 5, 5, 5]
                                        }
                                    })),
                                    barCategoryGap: '30%',
                                    barWidth: 10,
                                    showBackground: true,
                                    backgroundStyle: {
                                        color: '#1f3d68',
                                        borderRadius: [5, 5, 5, 5]
                                    },
                                    yAxisIndex: 0,
                                    label: { show: false }
                                }
                            ]

                        });
                    };

                    // ✅ 模拟数据
                    const mockResponse = {
                        tags: ["jiangsu", "anhui", "shanxi", "jiangxi", "hainan"],
                        data: [15.28, 10.28, 9.47, 8.47, 8.47]
                    };

                    // 映射英文 tag 为中文名
                    const nameMap = {
                        jiangsu: '江苏省',
                        anhui: '安徽省',
                        shanxi: '山西省',
                        jiangxi: '江西省',
                        hainan: '海南省',
                    };

                    const names = mockResponse.tags.map(tag => nameMap[tag] || tag);
                    const values = mockResponse.data;

                    // 渲染图表
                    initChart(names, values);
                    // 保持数据模拟和渲染逻辑
                };

                // 回款部门统计
                const initHuikuanbumenEcharts = () => {
                    // 模拟数据
                    const mockData = {
                        '创作研究院': {
                            '非新城': 1200,
                            '新城合作': 800,
                            '新城全资': 500
                        },
                        '建筑一院': {
                            '非新城': 1500,
                            '新城合作': 1000,
                            '新城全资': 600
                        },
                        '建筑二院': {
                            '非新城': 1300,
                            '新城合作': 950,
                            '新城全资': 450
                        },
                        '室内研究院': {
                            '非新城': 1100,
                            '新城合作': 1200,
                            '新城全资': 700
                        },
                        '原建筑三院': {
                            '非新城': 1700,
                            '新城合作': 1400,
                            '新城全资': 650
                        },
                        '技术中心': {
                            '非新城': 1600,
                            '新城合作': 1300,
                            '新城全资': 800
                        }
                    };

                    // 将模拟数据提取出来，形成数组结构
                    const xAxisData = Object.keys(mockData);
                    const nonNewCityData = xAxisData.map(key => mockData[key]['非新城']);
                    const newCityCooperationData = xAxisData.map(key => mockData[key]['新城合作']);
                    const newCityFullyOwnedData = xAxisData.map(key => mockData[key]['新城全资']);
                    const chart = echarts.init(document.getElementById('huikuanbumen'));

                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['非新城', '新城合作', '新城全资'],
                            top: '10%',
                            right: '5%',
                            textStyle: {
                                color: '#fff',  // 设置文字颜色为白色
                                fontSize: 12      // 可根据需要调整字体大小
                            },
                            itemWidth: 12,  // 设置图例方块的宽度
                            itemHeight: 12, // 设置图例方块的高度
                            itemStyle: {
                                borderRadius: 0  // 取消圆角，使其为方形
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: xAxisData,
                            axisLabel: {
                                // rotate: 30,
                                fontSize: 12,
                                color: '#fff'
                            },
                            axisTick: { show: false },
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#324460'
                                }
                            },
                            minInterval: 500,
                            name: '(万元)', // y 轴顶部的文字
                            nameTextStyle: {
                                fontSize: 12,
                                color: '#7a8da8', // 设置y轴标题颜色
                            },
                            nameLocation: 'end', // 在 y 轴中间显示文字
                            // nameGap: -10, // 设置标题与轴的间距
                            nameRotate: 0, // 旋转角度
                        },
                        series: [
                            {
                                name: '非新城',
                                type: 'bar',
                                data: nonNewCityData,
                                barWidth: '15%',
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            { offset: 1, color: 'rgba(31,152,255,0)' },
                                            { offset: 0, color: '#1f98ff' }
                                        ]),
                                    }
                                }
                            },
                            {
                                name: '新城合作',
                                type: 'bar',
                                data: newCityCooperationData,
                                barWidth: '15%',
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            { offset: 1, color: 'rgba(244,192,81,0)' },
                                            { offset: 0, color: '#f4c051' }
                                        ]),
                                    }
                                }
                            },
                            {
                                name: '新城全资',
                                type: 'bar',
                                data: newCityFullyOwnedData,
                                barWidth: '15%',
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            { offset: 1, color: 'rgba(58,231,252,0)' },
                                            { offset: 0, color: '#3ae7fc' }
                                        ]),
                                    }
                                }
                            }
                        ]
                    };

                    // 设置图表
                    chart.setOption(option);
                };

                // 应收款部门统计
                const initShouldkuanbumenEcharts = () => {
                    // 模拟数据
                    const mockData = {
                        '创作研究院': {
                            '非新城': 1200,
                            '新城合作': 800,
                            '新城全资': 500
                        },
                        '建筑一院': {
                            '非新城': 1500,
                            '新城合作': 1000,
                            '新城全资': 600
                        },
                        '建筑二院': {
                            '非新城': 1300,
                            '新城合作': 950,
                            '新城全资': 450
                        },
                        '室内研究院': {
                            '非新城': 1100,
                            '新城合作': 1200,
                            '新城全资': 700
                        },
                        '原建筑三院': {
                            '非新城': 1700,
                            '新城合作': 1400,
                            '新城全资': 650
                        },
                        '技术中心': {
                            '非新城': 1600,
                            '新城合作': 1300,
                            '新城全资': 800
                        }
                    };

                    // 将模拟数据提取出来，形成数组结构
                    const xAxisData = Object.keys(mockData);
                    const nonNewCityData = xAxisData.map(key => mockData[key]['非新城']);
                    const newCityCooperationData = xAxisData.map(key => mockData[key]['新城合作']);
                    const newCityFullyOwnedData = xAxisData.map(key => mockData[key]['新城全资']);
                    const chart = echarts.init(document.getElementById('shouldkuanbumen'));

                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['非新城', '新城合作', '新城全资'],
                            top: '10%',
                            right: '5%',
                            textStyle: {
                                color: '#fff',  // 设置文字颜色为白色
                                fontSize: 12      // 可根据需要调整字体大小
                            },
                            itemWidth: 12,  // 设置图例方块的宽度
                            itemHeight: 12, // 设置图例方块的高度
                            itemStyle: {
                                borderRadius: 0  // 取消圆角，使其为方形
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: xAxisData,
                            axisLabel: {
                                // rotate: 30,
                                fontSize: 12,
                                color: '#fff'
                            },
                            axisTick: { show: false },
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#324460'
                                }
                            },
                            minInterval: 500,
                            name: '(万元)', // y 轴顶部的文字
                            nameTextStyle: {
                                fontSize: 12,
                                color: '#666', // 设置y轴标题颜色
                            },
                            nameLocation: 'end', // 在 y 轴中间显示文字
                            // nameGap: -10, // 设置标题与轴的间距
                            nameRotate: 0, // 旋转角度
                        },
                        series: [
                            {
                                name: '非新城',
                                type: 'bar',
                                data: nonNewCityData,
                                barWidth: '15%',
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            { offset: 1, color: 'rgba(31,152,255,0)' },
                                            { offset: 0, color: '#1f98ff' }
                                        ]),
                                    }
                                }
                            },
                            {
                                name: '新城合作',
                                type: 'bar',
                                data: newCityCooperationData,
                                barWidth: '15%',
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            { offset: 1, color: 'rgba(244,192,81,0)' },
                                            { offset: 0, color: '#f4c051' }
                                        ]),
                                    }
                                }
                            },
                            {
                                name: '新城全资',
                                type: 'bar',
                                data: newCityFullyOwnedData,
                                barWidth: '15%',
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            { offset: 1, color: 'rgba(58,231,252,0)' },
                                            { offset: 0, color: '#3ae7fc' }
                                        ]),
                                    }
                                }
                            }
                        ]
                    };

                    // 设置图表
                    chart.setOption(option);
                };

                // 营业收入
                const initRunningMoneyEcharts = () => {
                    // 模拟数据
                    const mockData = {
                        '公司': 3200,
                        '技术发展中心': 2200,
                        '室内研究院': 1500,
                        '建筑一院': 1800,
                        '建筑二院': 1300,
                        '创作研究院:常州': 2400,
                        '创作研究院:上海': 1900
                    };

                    // 部门名和数据
                    const departments = Object.keys(mockData);
                    const dataValues = departments.map(department => mockData[department]);

                    // ECharts 配置项
                    var chart = echarts.init(document.getElementById('runningMoney'));

                    // 定义颜色生成函数
                    const getColor = (index, flag) => {
                        // 基础颜色RGB值
                        const yellowRgb = '244, 192, 81';
                        const blueRgb = '31, 152, 255';

                        // 判断是否透明（flag存在且为truthy值时透明）
                        const alpha = (flag) ? 0 : 1;  // flag为true时透明，否则不透明

                        // 根据index选择颜色
                        const rgb = (index === 0 || index === 2 || index === 4)
                            ? yellowRgb
                            : blueRgb;

                        return `rgba(${rgb}, ${alpha})`;
                    };

                    var option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}：{c}'
                        },
                        grid: {
                            left: '22%',
                            right: '10%',
                            top: '15%',
                            bottom: '10%'
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                color: '#7a8da8'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#666'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#324460'
                                }
                            },
                            minInterval: 500
                        },
                        yAxis: {
                            type: 'category',
                            data: departments,
                            axisLabel: {
                                fontSize: 14,
                                color: '#fff'
                            },
                            axisLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#324460'
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        series: [
                            {
                                name: '部门数据',
                                type: 'bar',
                                data: dataValues.map((value, index) => ({
                                    value,
                                    itemStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                            { offset: 0, color: getColor(index, true) },
                                            { offset: 1, color: getColor(index) }
                                        ])
                                    }
                                })),
                                barWidth: '45%',
                                label: {
                                    show: true,
                                    position: 'right',
                                    fontSize: 14,
                                    color: '#fff',
                                    // 添加右边距避免与竖线重叠
                                    offset: [10, 0],
                                    formatter: '{c}'
                                }
                            },
                            // 添加竖线标记的series
                            {
                                type: 'scatter',
                                symbol: 'rect',
                                symbolSize: [2, 20], // 竖线尺寸：宽度3px，高度25px
                                data: dataValues.map((value, index) => ({
                                    value: [value, index], // x为数值，y为部门索引
                                    itemStyle: {
                                        color: getColor(index) // 使用与柱子相同的颜色
                                    }
                                })),
                                zlevel: 2, // 确保竖线在柱子上方
                                tooltip: { show: false } // 不显示提示
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表
                    chart.setOption(option);
                };

                // 节点收入(含税)
                const initpointNumbberEcharts = () => {
                    // 模拟数据
                    const mockData = {
                        '公司': 3200,
                        '技术发展中心': 2200,
                        '室内研究院': 1500,
                        '建筑一院': 1800,
                        '建筑二院': 1300,
                        '创作研究院:常州': 2400,
                        '创作研究院:上海': 1900
                    };

                    // 部门名和数据
                    const departments = Object.keys(mockData);
                    const dataValues = departments.map(department => mockData[department]);

                    // ECharts 配置项
                    var chart = echarts.init(document.getElementById('pointNumbber'));

                    // 定义颜色生成函数
                    const getColor = (index, flag) => {
                        // 基础颜色RGB值
                        const yellowRgb = '244, 192, 81';
                        const blueRgb = '31, 152, 255';

                        // 判断是否透明（flag存在且为truthy值时透明）
                        const alpha = (flag) ? 0 : 1;  // flag为true时透明，否则不透明

                        // 根据index选择颜色
                        const rgb = (index === 0 || index === 2 || index === 4)
                            ? yellowRgb
                            : blueRgb;

                        return `rgba(${rgb}, ${alpha})`;
                    };

                    var option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}：{c}'
                        },
                        grid: {
                            left: '22%',
                            right: '10%',
                            top: '15%',
                            bottom: '10%'
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                color: '#7a8da8'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#666'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#324460'
                                }
                            },
                            minInterval: 500
                        },
                        yAxis: {
                            type: 'category',
                            data: departments,
                            axisLabel: {
                                fontSize: 14,
                                color: '#fff'
                            },
                            axisLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#324460'
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        series: [
                            {
                                name: '部门数据',
                                type: 'bar',
                                data: dataValues.map((value, index) => ({
                                    value,
                                    itemStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                            { offset: 0, color: getColor(index, true) },
                                            { offset: 1, color: getColor(index) }
                                        ])
                                    }
                                })),
                                barWidth: '45%',
                                label: {
                                    show: true,
                                    position: 'right',
                                    fontSize: 14,
                                    color: '#fff',
                                    // 添加右边距避免与竖线重叠
                                    offset: [10, 0],
                                    formatter: '{c}'
                                }
                            },
                            // 添加竖线标记的series
                            {
                                type: 'scatter',
                                symbol: 'rect',
                                symbolSize: [2, 20], // 竖线尺寸：宽度3px，高度25px
                                data: dataValues.map((value, index) => ({
                                    value: [value, index], // x为数值，y为部门索引
                                    itemStyle: {
                                        color: getColor(index) // 使用与柱子相同的颜色
                                    }
                                })),
                                zlevel: 2, // 确保竖线在柱子上方
                                tooltip: { show: false } // 不显示提示
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表
                    chart.setOption(option);
                };

                // 外发确认
                const initOutSureEcharts = () => {
                    // 模拟数据
                    const mockData = {
                        '公司': 3200,
                        '技术发展中心': 2200,
                        '室内研究院': 1500,
                        '建筑一院': 1800,
                        '建筑二院': 1300,
                        '创作研究院:常州': 2400,
                        '创作研究院:上海': 1900
                    };

                    // 部门名和数据
                    const departments = Object.keys(mockData);
                    const dataValues = departments.map(department => mockData[department]);

                    // ECharts 配置项
                    var chart = echarts.init(document.getElementById('outSure'));

                    // 定义颜色生成函数
                    const getColor = (index, flag) => {
                        // 基础颜色RGB值
                        const yellowRgb = '244, 192, 81';
                        const blueRgb = '31, 152, 255';

                        // 判断是否透明（flag存在且为truthy值时透明）
                        const alpha = (flag) ? 0 : 1;  // flag为true时透明，否则不透明

                        // 根据index选择颜色
                        const rgb = (index === 0 || index === 2 || index === 4)
                            ? yellowRgb
                            : blueRgb;

                        return `rgba(${rgb}, ${alpha})`;
                    };

                    var option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}：{c}'
                        },
                        grid: {
                            left: '22%',
                            right: '10%',
                            top: '5%',
                            bottom: '25%'
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                color: '#7a8da8'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#666'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#324460'
                                }
                            },
                            minInterval: 500
                        },
                        yAxis: {
                            type: 'category',
                            data: departments,
                            axisLabel: {
                                fontSize: 14,
                                color: '#fff'
                            },
                            axisLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#324460'
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        series: [
                            {
                                name: '部门数据',
                                type: 'bar',
                                data: dataValues.map((value, index) => ({
                                    value,
                                    itemStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                            { offset: 0, color: getColor(index, true) },
                                            { offset: 1, color: getColor(index) }
                                        ])
                                    }
                                })),
                                barWidth: '45%',
                                label: {
                                    show: true,
                                    position: 'right',
                                    fontSize: 14,
                                    color: '#fff',
                                    // 添加右边距避免与竖线重叠
                                    offset: [10, 0],
                                    formatter: '{c}'
                                }
                            },
                            // 添加竖线标记的series
                            {
                                type: 'scatter',
                                symbol: 'rect',
                                symbolSize: [2, 20], // 竖线尺寸：宽度3px，高度25px
                                data: dataValues.map((value, index) => ({
                                    value: [value, index], // x为数值，y为部门索引
                                    itemStyle: {
                                        color: getColor(index) // 使用与柱子相同的颜色
                                    }
                                })),
                                zlevel: 2, // 确保竖线在柱子上方
                                tooltip: { show: false } // 不显示提示
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表
                    chart.setOption(option);
                };

                // 外发支付
                const initOutPayEcharts = () => {
                    // 模拟数据
                    const mockData = {
                        '公司': 3200,
                        '技术发展中心': 2200,
                        '室内研究院': 1500,
                        '建筑一院': 1800,
                        '建筑二院': 1300,
                        '创作研究院:常州': 2400,
                        '创作研究院:上海': 1900
                    };

                    // 部门名和数据
                    const departments = Object.keys(mockData);
                    const dataValues = departments.map(department => mockData[department]);

                    // ECharts 配置项
                    var chart = echarts.init(document.getElementById('outPay'));

                    // 定义颜色生成函数
                    const getColor = (index, flag) => {
                        // 基础颜色RGB值
                        const yellowRgb = '244, 192, 81';
                        const blueRgb = '31, 152, 255';

                        // 判断是否透明（flag存在且为truthy值时透明）
                        const alpha = (flag) ? 0 : 1;  // flag为true时透明，否则不透明

                        // 根据index选择颜色
                        const rgb = (index === 0 || index === 2 || index === 4)
                            ? yellowRgb
                            : blueRgb;

                        return `rgba(${rgb}, ${alpha})`;
                    };

                    var option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}：{c}'
                        },
                        grid: {
                            left: '22%',
                            right: '12%',
                            top: '5%',
                            bottom: '8%'
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                color: '#7a8da8'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#666'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#324460'
                                }
                            },
                            minInterval: 500
                        },
                        yAxis: {
                            type: 'category',
                            data: departments,
                            axisLabel: {
                                fontSize: 14,
                                color: '#fff'
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        series: [
                            {
                                name: '部门数据',
                                type: 'bar',
                                data: dataValues.map((value, index) => ({
                                    value,
                                    itemStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                            { offset: 0, color: getColor(index, true) },
                                            { offset: 1, color: getColor(index) }
                                        ])
                                    }
                                })),
                                barWidth: '45%',
                                label: {
                                    show: true,
                                    position: 'right',
                                    fontSize: 14,
                                    color: '#fff',
                                    // 添加右边距避免与竖线重叠
                                    offset: [10, 0],
                                    formatter: '{c}'
                                }
                            },
                            // 添加竖线标记的series
                            {
                                type: 'scatter',
                                symbol: 'rect',
                                symbolSize: [2, 25], // 竖线尺寸：宽度3px，高度25px
                                data: dataValues.map((value, index) => ({
                                    value: [value, index], // x为数值，y为部门索引
                                    itemStyle: {
                                        color: getColor(index) // 使用与柱子相同的颜色
                                    }
                                })),
                                zlevel: 2, // 确保竖线在柱子上方
                                tooltip: { show: false } // 不显示提示
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表
                    chart.setOption(option);
                };

                // onMounted(() => {
                // });

                onMounted(() => {
                    initEcharts();
                    initTenEcharts();
                    initoneChartEcharts()
                    initrenjunchanzhiEcharts()
                    initHuikuanbumenEcharts()
                    initShouldkuanbumenEcharts()
                    initRunningMoneyEcharts()
                    initpointNumbberEcharts()
                    initOutSureEcharts()
                    initOutPayEcharts()
                    fetchMarketData('month');
                });

                watch(marketEditBtnType, (newVal) => {
                    fetchMarketData(newVal);
                });

                return {
                    selectedDate,
                    dateInput,
                    handleIconClick,
                    marketEditBtnType,
                    loading,
                    error,
                    monthData
                };
            }
        }).mount('#app');
    </script>
</body>

</html>